<template>
    <div class='banner'>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="handlerClose" :close-on-click-modal="false">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                    <el-input v-model='form.username' placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                    <el-input v-model='form.password' placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item label="手机" :label-width="formLabelWidth" prop="iphone">
                    <el-input v-model='form.iphone' placeholder="手机"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                    <el-input v-model='form.email' placeholder="邮箱"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
                    <el-input v-model='form.nickname' placeholder="昵称"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="role" :label-width="formLabelWidth">
                    <el-select v-model="form.role" placeholder="角色">
                        <el-option label="管理用户" :value="1"></el-option>
                        <el-option label="普通用户" :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUpload">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'user-dialog-page',
    data() {
        return {
            dialogFormVisible: false,
            form: {},
            title: '新增用户',
            formLabelWidth: '80px',
            url: {
                update: '/users/update-account',
                add: '/users/register',
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                iphone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的手机号', trigger: 'blur' }
                ],
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                ],
                role: [
                    { required: true, message: '请选择角色', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        open(row) {
            if (row) {
                this.title = '修改图片'
                this.form = Object.assign({}, row)
            }
            this.dialogFormVisible = true
        },
        //确定提交
        submitUpload() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log(666666);
                    let url = this.form.id ? this.url.update : this.url.add
                    let message = this.form.id ?'修改成功':'添加成功'
                    let data = Object.assign({}, this.form)
                    this.$http.post(url, data).then(res => {
                        if (res.status === 200) {
                            this.$message({
                                message,
                                type: 'success'
                            });
                            this.dialogFormVisible = false
                        }
                    })


                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //监听弹出框关闭
        handlerClose() {
            this.$emit('close', this.submit)
        }
    }
}
</script>

<style scoped lang='less'></style>